<script setup lang="js">
import { onMounted } from 'vue';
import * as PIXI from 'pixi.js';

onMounted(() => {

  const app = new PIXI.Application({ resizeTo: window });

  document.getElementById('pixi-DisplacementMapFlag-container').appendChild(app.view);

  app.stage.eventMode = 'static';

  const container = new PIXI.Container();

  app.stage.addChild(container);

  const flag = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/flag.png');

  container.addChild(flag);
  flag.x = 100;
  flag.y = 100;

  const displacementSprite = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/displacement_map_repeat.jpg');
  // Make sure the sprite is wrapping.

  displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
  const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);

  displacementFilter.padding = 10;

  displacementSprite.position = flag.position;

  app.stage.addChild(displacementSprite);

  flag.filters = [displacementFilter];

  displacementFilter.scale.x = 30;
  displacementFilter.scale.y = 60;

  app.ticker.add(() => {
    // Offset the sprite position to make vFilterCoord update to larger value.
    // Repeat wrapping makes sure there's still pixels on the coordinates.
    displacementSprite.x++;
    // Reset x to 0 when it's over width to keep values from going to very huge numbers.
    if (displacementSprite.x > displacementSprite.width) {
      displacementSprite.x = 0;
    }
  });
})

</script>

<template>
  <div id="pixi-DisplacementMapFlag-container"></div>
</template>

<style scoped></style>
